<template>
  <div id="writingConfig">
    <span class="writingConfigTitle">
      文章配置列表
    </span>
    <!-- 搜索 -->
    <topSearch @toSearch="toSearch"></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <el-button
        type="warning"
        v-for="item in modularList"
        :key="item.dictValue"
        @click="addRelease(item.dictValue)"
        >发布{{ item.dictLabel }}</el-button
      >
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column label="序号" type="index" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="updateByName"
        label="发布人"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="createdTime"
        label="创建时间"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="title"
        label="文章标题"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="展示模块" min-width="100" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="modularColor(row)[0]" :style="modularColor(row)[1]">
            {{ row.modular | filterName('dapeng_info_desk') }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="排列序号" min-width="100" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="modularColor(row)[0]" :style="modularColor(row)[1]">
            {{ row.sort }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发布状态" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.status === 'OPEN'" class="tag-span primary"
            >已发布</span
          >
          <span v-else class="tag-span">未发布</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180" align="center">
        <template slot-scope="{ row }">
          <el-button
            v-if="row.status === 'OPEN'"
            type="text"
            @click="handleStatus(row.id)"
          >
            下架
          </el-button>
          <el-button v-else type="text" @click="handleStatus(row.id)">
            发布
          </el-button>
          <el-button type="text" @click="toPreview(row)">
            查看预览
          </el-button>
          <el-button
            type="text"
            :disabled="disabledEdit(row)"
            :style="{ color: disabledEdit(row) ? '#8B8B7A' : '' }"
            @click="toEdit(row)"
          >
            开始编辑
          </el-button>
          <el-button
            type="text"
            v-show="row.isPush === 'N' && row.status === 'OPEN'"
            @click="handeleRecommend(row)"
          >
            上推荐
          </el-button>
          <el-button
            type="text"
            v-show="row.isPush === 'Y'"
            :style="{ color: row.isPush === 'Y' ? '#8B8B7A' : '' }"
          >
            推荐中
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 媒体报道 -->
    <mediaReportsDialog
      v-if="mediaReportsDialogData.isShow"
      :mediaReportsDialogData="mediaReportsDialogData"
      @refresh="refresh"
    ></mediaReportsDialog>
    <!-- 学员故事 -->
    <studentsStoryDialog
      v-if="studentsStoryDialogData.isShow"
      :studentsStoryDialogData="studentsStoryDialogData"
      @refresh="refresh"
    ></studentsStoryDialog>
    <!--移动端预览-->
    <dialogQrcode
      v-if="dialogQrcodeData.isShow"
      :dialog-data="dialogQrcodeData"
    ></dialogQrcode>
    <!-- 媒体报道预览 -->
    <previewDialog
      v-if="previewDialogData.isShow"
      :previewDialogData="previewDialogData"
      @previewToEdit="previewToEdit"
    ></previewDialog>
  </div>
</template>
<script>
import topSearch from './topSearch'
import studentsStoryDialog from '../../common/studentsStoryDialog'
import mediaReportsDialog from '../../common/mediaReportsDialog'
import {
  getArticleList,
  editStatus,
  recommend
} from '@/api/brandManage/aboutUs'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import dialogQrcode from '@component/readManagement/common/dialogQrcode' //预览弹窗
import previewDialog from '../../common/previewDialog'
import { modularColor, disabledEdit } from '../types'
export default {
  props: ['flag'],
  components: {
    topSearch,
    mediaReportsDialog,
    studentsStoryDialog,
    dialogQrcode,
    previewDialog
  },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 10,
        source: 'information_desk'
      },
      mediaReportsDialogData: {
        isShow: false
      },
      studentsStoryDialogData: {
        isShow: false
      },
      modularList: [],
      dialogQrcodeData: {
        isShow: false, // 默认隐藏
        linkUrl: '' // 编辑时，传递的参数
      },
      previewDialogData: {
        isShow: false
      }
    }
  },
  watch: {
    flag() {
      this.searchList()
    }
  },
  async mounted() {
    this.modularList = await sysNormalDisable(
      'dapeng_info_desk',
      'dapeng_info_desk'
    )
    this.searchList()
  },
  methods: {
    modularColor,
    disabledEdit,
    searchList() {
      getArticleList(this.searchParams, (res) => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
    //搜索
    toSearch(val) {
      this.searchParams.pageNum = 1
      Object.assign(this.searchParams, val)
      this.searchList()
    },
    /* 修改状态 */
    handleStatus(id) {
      editStatus({ id }, () => {
        this.$emit('updateList')
        this.$message.success('状态修改成功')
      })
    },
    /* 新增发布 */
    addRelease(modular) {
      if (modular === 'MEDIA')
        this.mediaReportsDialogData = {
          isShow: true,
          source: 'information_desk'
        }
      else
        this.studentsStoryDialogData = {
          isShow: true,
          modular,
          source: 'information_desk'
        }
    },
    /* 查看预览 */
    toPreview({ id, modular }) {
      if (modular === 'MEDIA') {
        this.previewDialogData = { isShow: true, id }
      } else {
        this.dialogQrcodeData.isShow = true
        this.dialogQrcodeData.linkUrl = `${process.env.VUE_APP_MAIN_URL}info-centre/detail/${id}`
      }
    },
    /* 编辑 */
    toEdit({ id, modular }) {
      if (modular === 'MEDIA') {
        this.mediaReportsDialogData = { isShow: true, id }
      } else {
        this.studentsStoryDialogData = { isShow: true, id, modular }
      }
    },
    /* 预览去修改 */
    previewToEdit(id) {
      this.mediaReportsDialogData = { isShow: true, id }
    },
    /* 新增编辑刷新列表 */
    refresh() {
      this.searchList()
    },
    /* 上推荐 */
    handeleRecommend(row) {
      const { id } = row
      recommend({ id }, () => {
        this.$message.success('推荐成功')
        this.$emit('updateList')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.writingConfigTitle {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  margin-left: 30px;
}
</style>
